﻿import 'package:country_code_picker_plus/country_code_picker_plus.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:vischat/core/annotations/getx_route_enhanced.dart';
import 'package:vischat/core/controller/auth_service.dart';
import 'package:vischat/modules/login/login_binding.dart';
import 'package:vischat/modules/login/login_controller.dart';
import 'package:vischat/shared/widgets/buttons/custom_button.dart';
import 'package:vischat/shared/widgets/tap_to_close_keyboard.dart';

@GetXRoute('/login', binding: LoginBinding)
class LoginPage extends GetView<LoginController> {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SafeArea(
        child: TapToCloseKeyboard(
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 30.w, vertical: 60.h),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'page.login.login'.tr,
                  style: TextStyle(
                    fontSize: 48.sp,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                SizedBox(height: 80.h),
                Row(
                  children: [
                    CountryCodePicker(
                      mode: CountryCodePickerMode.bottomSheet,
                      onChanged: controller.changeCountry,
                      onInit: controller.initCountry,
                      initialSelection: 'CN',
                      showFlag: true,
                      showDropDownButton: true,
                    ),
                    Expanded(
                      child: TextField(
                        controller: controller.textController,
                        keyboardType: TextInputType.phone,
                        focusNode: controller.focusNode,
                        decoration: InputDecoration(
                          border: InputBorder.none,
                          contentPadding: EdgeInsets.zero,
                          isDense: true,
                          hintText: 'tip.enterPhone'.tr,
                          hintStyle: const TextStyle(color: Colors.black12),
                        ),
                        onChanged: controller.validatePhoneNumber,
                      ),
                    ),
                  ],
                ),
                const Divider(height: 0),
                SizedBox(height: 30.h),
                Obx(
                  () => CustomButton(
                    onTap: controller.toVerifySms,
                    disable: !controller.phoneCheck,
                    text: 'button.login'.tr,
                    width: double.infinity,
                    height: 68.h,
                    textStyle: TextStyle(color: Colors.white, fontSize: 28.sp),
                  ),
                ),
                Row(
                  children: [
                    Obx(
                      () => Checkbox(
                        value: controller.isAgree,
                        onChanged: controller.handleAgree,
                        checkColor: Colors.lightBlue,
                        activeColor: Colors.white,
                        side: WidgetStateBorderSide.resolveWith(
                          (state) => const BorderSide(color: Colors.lightBlue),
                        ),
                      ),
                    ),
                    // TODO 协议
                    const Text('协议内容'),
                  ],
                ),
                const Spacer(),
                GetX<AuthService>(
                  builder: (service) => service.canOneClickLogin
                      ? GestureDetector(
                    onTap: controller.handleOneClickLogin,
                    child: Center(
                      child: Text(
                        'button.oneClickLogin'.tr,
                        style: const TextStyle(color: Colors.lightBlue),
                      ),
                    ),
                  )
                      : SizedBox()
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}
